<template>
  <div>
    <div v-for="(item,i) in configData.sysAuthRulesWayList" :key="item.oneAuthWay">
      <div v-if="loginTypeCode==item.oneAuthWay">
        <div v-if="item.oneAuthWay == '1'">
          <el-form v-if="loginTypeCode=='1'" ref="loginForm" :model="loginForm"
                   :rules="loginRules" class="login-form" auto-complete="on"
                   label-position="left">
            <el-form-item prop="account">
              <el-input
                ref="account"
                v-model.trim="loginForm.account"
                placeholder="请输入用户名"
                name="account"
                type="text"
                tabindex="1"
                maxlength="20"
                auto-complete="on"
              >
                <span slot="prefix" class="svg-container">
                  <!-- <svg-icon icon-class="user_login" class="el-input__icon input-icon" /> -->
                  <img src="../../../assets/user-icon.png" draggable="false">
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                :key="passwordType"
                ref="password"
                v-model.trim="loginForm.password"
                :type="passwordType"
                placeholder="请输入密码"
                name="password"
                tabindex="2"
                maxlength="20"
                auto-complete="off"
                @keyup.enter.native="loginClick(item)"
              >
                <span slot="prefix" class="svg-container">
                  <!-- <svg-icon icon-class="lock_black" class="el-input__icon input-icon" /> -->
                  <img src="../../../assets/password-icon.png" draggable="false">
                </span>
                <span slot="suffix" class="svg-container show-pwd" @click="showPwd(i)">
                  <svg-icon :icon-class="passwordType === 'password' ? 'hide_login' : 'vector_login'" class="el-input__icon input-icon" />
                </span>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-else-if="item.oneAuthWay == '2'">
          <el-form ref="smsloginForm" :model="smsloginForm" :rules="loginRules"
                   class="login-form" auto-complete="on" label-position="left">
            <el-form-item prop="phone">
              <el-input
                ref="phone"
                v-model.trim="smsloginForm.phone"
                placeholder="请输入手机号"
                name="phone"
                type="text"
                tabindex="1"
                maxlength="11"
                auto-complete="on"
                :clearable="true"
              >
                <span slot="prefix" class="svg-container">
                  <!-- <i class="el-icon-mobile-phone" style="color: #000000;  font-size: 16px;" /> -->
                  <img src="../../../assets/user-icon.png" draggable="false">
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="smsCode">
              <el-input
                :key="passwordType"
                ref="smsCode"
                v-model.trim="smsloginForm.smsCode"
                placeholder="请输入验证码"
                name="smsCode"
                type="text"
                tabindex="2"
                maxlength="6"
                auto-complete="off"
                @keyup.enter.native="loginClick(item)"
              >
                <span slot="prefix" class="svg-container">
                  <img src="../../../assets/code-icon.png" draggable="false">
                </span>
                <span slot="suffix" class="sendMsg">
                  <el-link v-if="!sendMsgDisabled" :loading="codeLoading" type="primary"
                           :disabled="totaltime>0&&totaltime<60" :underline="false" @click="totaltime>0&&totaltime<60?'':getsmsCode('smsloginForm','one',item)">{{ zfscontent }}</el-link>
                  <el-link v-if="sendMsgDisabled" type="primary" :underline="false">{{ totaltime }}秒</el-link>
                </span>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button :loading="loading" type="primary" class="loginbtn"
                   style="width:100%;" @click.native.prevent="loginClick(item)">
          {{ $t('login.logIn') }}
        </el-button>
        <div class="goforgetpw">
          <span v-if="configData.sysAuthRulesWayList.length > 1">
            <el-link v-if="loginTypeCode=='1'" type="primary" @click="loginTypeCode='2'">{{ configData.sysAuthRulesWayList[1].authWayName }}</el-link>
            <el-link v-if="loginTypeCode=='2'" type="primary" @click="loginTypeCode='1'">{{ configData.sysAuthRulesWayList[0].authWayName }}</el-link>
          </span>
          <span class="flex-1" />
          <el-link @click="gtoRegister" type="primary" style="margin-right: 10px">注册</el-link>
          <el-link type="primary" @click="goforgetpw">忘记密码</el-link>
        </div>
      </div>
    </div>
    <!-- </el-tab-pane> -->
    <!-- <el-tab-pane label="账号登录" name="1" />
      <el-tab-pane label="短信登录" name="2" /> -->
    <!-- </el-tabs> -->
    <dtDialog
      ref="dialogPopupRef"
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :width="'452px'"
      :is-loading="loading"
      :footer-slot="twoType == 'siider'"
      :footer-hidden="true"
      :screen-hidden="true"
      @changeDialog="dialogFormVisible=false"
      @closeDialog="form={}"
      @comfirmBtn="twoSavaData"
    >
      <div slot="content">
        <div v-if="twoType=='phone'">
          <el-form ref="twoSmsloginForm" :model="twoSmsloginForm" :rules="loginRules"
                   class="login-form two_form" auto-complete="on" label-position="left"
                   @submit.native.prevent>
            <el-form-item class="phone" label="手机号" prop="">
              <span>{{ twoSmsloginForm.phone }}</span>
              <!-- :clearable="true" -->
            </el-form-item>
            <el-form-item class="yzm" label="验证码" prop="smsCode">
              <el-input
                :key="passwordType"
                ref="smsCode"
                v-model.trim="twoSmsloginForm.smsCode"
                placeholder="请输入短信验证码"
                name="smsCode"
                tabindex="2"
                maxlength="6"
                auto-complete="off"
                @keyup.enter.native="twoSavaData()"
              />
              <el-button class="getcode" type="text" :loading="codeLoading"
                         :disabled="totaltime>0&&totaltime<60" @click="totaltime>0&&totaltime<60?'':getsmsCode('twoSmsloginForm','two')">{{ zfscontent }}</el-button>
            </el-form-item>
          </el-form>

        </div>
        <div v-else>
          <dt-dragVerify
            ref="dialogopen"
            :l="42"
            :r="10"
            :w="400"
            :h="200"
            :block_y="block_y"
            :imgurl="imgurl"
            :miniimgurl="miniimgurl"
            :slider-text="text"
            @success="onSuccess"
            @refresh="onRefresh"
          />
        </div>
      </div>
    </dtDialog>
  </div>
</template>
<script>
import router from '@/router'
import { checkPhone } from '@/framework/utils/validate'
import { encrypt } from '@/framework/utils/jsencrypt'
import { setToken } from '@/framework/utils/auth'
import { getSliderKaptcha, loginApi, loginSms, loginByPwd } from '@/framework/api/user'
import { sendMailCode, authSendMailCode } from '@/framework/api/userCenter/sysUser'
import { encryption, decryption } from 'DQBasic-vue-component'
import themepicker from '@/framework/utils/mixins/themepicker'

export default {
  name: 'AuthenticationFactorOne',
  // components: {
  //   dtDialog,
  //   dragVerifyImgChip,
  //   slideVerify
  // },
  mixins: [themepicker],
  props: {
    // eslint-disable-next-line vue/require-default-prop
    configData: {
      type: Object,
      require: true
    },
    tenantId: {
      type: String,
      default: ''
    }
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'))
      } else if (value.length <= 0) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
      // else if (value.length < 6) {
      //   callback(new Error('密码为6-20位'))
      // }
    }
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号/电话'))
      } else if (!checkPhone(value)) {
        callback(new Error('请输入合法的手机号/电话'))
      } else {
        callback()
      }
    }
    return {
      dialogTitle: '滑块验证',
      dialogFormVisible: false,
      miniimgurl: '',
      imgurl: '',
      slideVerifyWidth: 432,
      blockW: 60,
      block_y: 0,
      text: '测试',
      smsNum: 0,
      kaptchaRequestId: '',
      logintypFlag: false,
      loading: false,
      codeLoading: false,
      passwordType: 'password',
      totaltime: 60,
      codeimg: '',
      activeType: '1',
      zfscontent: '获取验证码',
      timer2: null,
      // loginType: 'username',
      loginTypeCode: '1',
      loginForm: {
        tenantId: '',
        account: '',
        password: '',
        hasKaptcha: false,
        kaptchaCode: '',
        kaptchaRequestId: '',
        pageKaptchaWidth: '400',
        moveLength: ''
      },
      loginRules: {
        account: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        phone: [{ required: true, trigger: 'change', validator: validatePhone }],
        // kaptchaCode: [{ required: true, trigger: 'blur', message: '请输入图片验证码' }],
        smsCode: [{ required: false, trigger: 'blur', message: '请输入短信验证码' }]

      },
      smsloginForm: {
        tenantId: '000000',
        phone: '',
        smsCode: '', // 短信验证码
        smsRequestId: '', // 短信识别号
        hasKaptcha: false, // 是否图片验证码
        kaptchaCode: '', // 图片验证码
        kaptchaRequestId: '', // 图片验证码识别id
        pageKaptchaWidth: '400',
        moveLength: ''
      },
      twoSmsloginForm: {
        phone: '',
        smsCode: '', // 短信验证码
        smsRequestId: '' // 短信识别号
      },
      btnLoading: false,
      isPassing: false,
      twoType: 'phone',
      currentConfigData: {},
      selectList: [],
      sendMsgDisabled: false,
      redirect: ''
    }
  },
  watch: {
    $route: {
      handler(route) {
        if (route.query.appRedirectUrl) {
          this.appRedirectUrl = route.query.appRedirectUrl
          sessionStorage.setItem('appRedirectUrl', this.appRedirectUrl)
        }
        if (route.query.ssoLoginFlag == 'true') {
          this.logintypFlag = true
        } else {
          this.logintypFlag = false
        }
        // this.redirect = route.query && route.query.redirect
        this.redirect = '/'
      },
      immediate: true
    },
    configData: {
      handler(n, o) {
        if (n.sysAuthRulesWayList && n.sysAuthRulesWayList.length > 0) {
          // this.activeType = n.sysAuthRulesWayList[0].oneAuthWay + ''
          // 处理默认显示哪种认证方式
          this.loginTypeCode = n.sysAuthRulesWayList[0].oneAuthWay
          if (n.sysAuthRulesWayList[0].oneAuthWay === '1') {
            this.loginTypeCode = '1'
          } else if (n.sysAuthRulesWayList[0].oneAuthWay === '2') {
            this.loginTypeCode = '2'
          }
        }
      },
      immediate: true
    },
    dialogFormVisible: {
      handler(n, o) {
        if (n === false) {
          this.$refs?.twoSmsloginForm?.resetFields()
          // clearInterval(this.timer2)
          // this.timer2 = null
          this.zfscontent = '获取验证码'
          this.totaltime = 60
        }
      }
    },
    loginTypeCode: {
      handler(n, o) {
        if (n === '2' || n === '1') {
          clearInterval(this.timer2)
          this.timer2 = null
          this.zfscontent = '获取验证码'
          this.totaltime = 60
        }
      }
    }
  },
  mounted() {
    // this.creatSlider()
    if (window.location.host === '27.185.23.121:39801') {
      this.loginForm.account = 'dqbasic'
      this.loginForm.password = 'hbis@123'
    }
    if (this.$route.query.redirect) {
      this.redirect = this.$route.query.redirect
    }
    this.initData()
  },
  methods: {
    async getCurrentThemeInfo() {
      const themeArr = await this.$store.dispatch('settings/getCurrentThemeInfo')
      themeArr.forEach((res) => {
        if (res.key === 'theme') {
          this.initTheme(res.value)
        }
      })
    },
    async initData() {
      this.initUnLogin()
      // sessionStorage 存储重定向地址， 请求单点登录接口地址的时候 请求头添加该参数
      if (this.$route.query.appRedirectUrl) {
        this.appRedirectUrl = this.$route.query.appRedirectUrl
        sessionStorage.setItem('appRedirectUrl', this.appRedirectUrl)
      }
      if (this.$route.query.authMode) {
        this.authMode = this.$route.query.authMode
        sessionStorage.setItem('authMode', this.authMode)
      }
      if (this.$route.query.tenantId) {
        this.tenantId = this.$route.query.tenantId
        sessionStorage.setItem('tenantId', this.tenantId)
      }
      // 确定路径的来路，如果是应用进来的，且当前门户没有token  但是携带参数 单点登录标识为true，进行单点登录
      if (this.$route.query.ssoLoginFlag == 'true') {
        this.logintypFlag = true
      } else {
        this.logintypFlag = false
      }
    },
    /**
     * 当前所在认证方式
     * @param {*} currentConfigData
     */
    loginClick(currentConfigData) {
      // 点击登录按钮，判断第一种认证因子的方式，
      this.currentConfigData = currentConfigData
      switch (currentConfigData.oneAuthWay) {
        case '1': // 账密
          this.accountLogin(currentConfigData)
          break
        case '2':// 短信
          this.msgLogin()
          break
        case '4':// 滑块
          break
        default:
          break
      }
    },
    // 2.0账密
    accountLogin(currentConfigData) {
      this.$refs.loginForm[0].validate(async (valid) => {
        if (valid) {
          // 判断是否有二次认证
          await this.dealAuthTwo(currentConfigData)
        } else {
          return false
        }
      })
    },
    async dealAuthTwo(currentConfigData) {
      // 先判断是否有第二种验证方式
      if (currentConfigData.twoAuthWay === '4') { // 如果有认证因子4 且 因子4为滑块
        this.creatSlider()
      } else if (currentConfigData.twoAuthWay === '2') { // 如果有认证因子2 且 因子2为短信
        // 先验证用户名密码是否正确
        if (!await this.validAccount()) return
        // 若正确则打开短信弹框
        this.twoType = 'phone'
        this.dialogTitle = '短信验证'
        this.dialogFormVisible = true
      } else { // 若没有因子2  则判断是否有滑块验证
        this.accountLoginSavaData()
      }
    },
    // 2.0短信
    msgLogin() {
      this.loginRules.smsCode[0].required = true
      this.$refs.smsloginForm[0].validate((valid) => {
        if (valid) {
          this.smsloginForm.tenantId = this.tenantId
          this.msgLoginSavaData(this.smsloginForm)
        } else {
          return false
        }
      })
    },
    async validAccount() {
      this.loginForm.tenantId = this.tenantId
      // 验证账号密码是否正确方法  正确 则复制手机号和用户id  返回true  不正确则不处理  返回false
      try {
        const tempData = encryption({
          data: this.loginForm
        })
        const res = await loginByPwd(tempData)
        const response = decryption(res)
        this.twoSmsloginForm.phone = response.data.loginUser.simpleUserInfo.phone // 校验后返回的手机号
        this.twoSmsloginForm.userId = response.data.loginUser.userId // 校验后返回的用户名
        return true
      } catch (error) {
        return false
      }
    },
    // 账密登录方法
    accountLoginSavaData() {
      //  如果是单点登录 走unlogin方法
      if (this.logintypFlag) {
        this.unlogin()
      } else {
        this.loading = true
        this.showScreenLoading()
        // const tempData = Object.assign({}, {
        //   ...this.loginForm,
        //   password: encrypt(this.loginForm.password)// 将密码加密
        // })
        this.loginForm.tenantId = this.tenantId
        this.$store.dispatch('user/login', this.loginForm).then(() => { // 走登录接口
          this.getCurrentThemeInfo()
          this.$router.push({
            path: '/onlineClassroom/home'
          })
          this.loading = false
          this.hideScreenLoading()
        }).catch((res) => {
          if (res.code === 'B03500') {
            router.push({
              path: '/forceUpdatePw',
              query: {
                tenantId: this.loginForm.tenantId,
                account: this.loginForm.account
              }
            })
          }
          this.loading = false
          this.hideScreenLoading()
          // 如果错误 则刷新验证码
          if (res.code === 'A22103' && this.$refs.dialogopen) {
            this.onRefresh()
          } else {
            this.dialogFormVisible = false
          }
        })
      }
    },
    goforgetpw() {
      this.$router.push({
        path: '/newForgetPw'
        // path: '/forceUpdatePw'

      })
    },
    // 注册
    gtoRegister(){
      this.$router.push({
        path: '/classroomRegister'
      })
    },
    // 单点账号密码登录
    unlogin() {
      const tempData = Object.assign({}, {
        ...this.loginForm,
        password: encrypt(this.loginForm.password)
      })
      tempData.tenantId = this.tenantId
      const loginparmas = {
        loginRequest: tempData,
        ssoLoginParam: {
          ssoLoginFlag: true,
          authMode: this.authMode,
          appRedirectUrl: this.appRedirectUrl
        }
      }
      this.$refs.loginForm[0].validate((valid) => {
        if (valid) {
          this.loading = true
          loginApi(loginparmas).then((res) => {
            if (res.success === true && res.data.appRedirectflag == true) {
              const { token } = res.data.loginResponse
              setToken(token)
              this.loading = false
              // window.location.href = res.data.appRedirectUrl
            }
          }).catch((res) => {
            if (res.code === 'B03500') {
              router.push({
                path: '/forceUpdatePw',
                query: {
                  tenantId: this.loginForm.tenantId,
                  account: this.loginForm.account
                }
              })
            }
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    // 单点短信登录
    // unsmslogin() {
    //   this.loginRules.smsCode[0].required = true
    //   const loginparmas = {
    //     'loginRequest': this.smsloginForm,
    //     'ssoLoginParam': {
    //       'ssoLoginFlag': true,
    //       'authMode': this.authMode,
    //       'appRedirectUrl': this.appRedirectUrl
    //     }
    //   }
    //   this.$refs.smsloginForm[0].validate(valid => {
    //     if (valid) {
    //       this.loading = true
    //       loginSms(this.smsloginForm).then((res) => {
    //         if (res.success === true && res.data.appRedirectflag == true) {
    //           const token = res.data.loginResponse.token
    //           setToken(token)
    //           this.loading = false
    //           window.location.href = res.data.appRedirectUrl
    //         }
    //         const { token } = response.data
    //         // commit('SET_TOKEN', token)
    //         setToken(token)
    //         this.$router.push({ path: this.redirect || '/' })
    //         this.loading = false
    //       }).catch(res => {
    //         this.loading = false
    //         this.smsloginForm.smsCode = ''
    //       })
    //     } else {
    //       return false
    //     }
    //   })
    // },
    // 单点短信登录2.0版本
    unsmsloginV2(formData) {
      formData.tenantId = this.tenantId
      const loginparmas = {
        loginRequest: formData,
        ssoLoginParam: {
          ssoLoginFlag: true,
          authMode: this.authMode,
          appRedirectUrl: this.appRedirectUrl
        }
      }
      this.loading = true
      loginSms(loginparmas).then((res) => {
        if (res.success === true && res.data.appRedirectflag == true) {
          const { token } = res.data.loginResponse
          setToken(token)
          this.loading = false
          window.location.href = res.data.appRedirectUrl
        }
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
      }).catch((res) => {
        this.loading = false
        this.smsloginForm.smsCode = ''
      })
    },
    // 短信-点击获取短信验证码
    getsmsCode(formRef, type, currentConfigData) {
      this.currentConfigData = currentConfigData
      const ref = type === 'one' ? this.$refs[formRef][0] : this.$refs[formRef]
      this.loginRules.smsCode[0].required = false
      ref.validate((valid) => {
        if (valid) {
          // 若因子1为短信且当前认证方式有因子2存在  则在发送验证码之前  进行因子2的校验
          if (currentConfigData && currentConfigData.twoAuthWay && currentConfigData.twoAuthWay === '4') { // 如果有认证因子2 且 因子2为滑块
            this.creatSlider()
          } else {
            this.sendsmsCode(type)
          }
        } else {
          return false
        }
      })
    },
    // 获取验证码
    sendsmsCode(type) {
      if (type && type === 'two') {
        this.codeLoading = true
        this.twoSmsloginForm.tenantId = this.tenantId
        const pa = encryption({
          data: this.twoSmsloginForm
        })
        sendMailCode(pa).then((res) => {
          const res1 = decryption(res)
          if (res1.success) {
            // this.dialogFormVisible = false
            this.$message({
              message: res1.message,
              type: 'success'
            })
            this.time60Two()
            this.twoSmsloginForm.smsRequestId = res1.data.smsRequestId
            this.twoSmsloginForm.smsCode = ''
            this.codeLoading = false
            this.hideScreenLoading()
          }
        }).catch(() => {
          this.codeLoading = false
          this.hideScreenLoading()
        })
      } else {
        this.codeLoading = true
        this.smsloginForm.tenantId = this.tenantId
        // const smsloginForm = encryption({
        //   data: this.smsloginForm
        // })
        authSendMailCode(this.smsloginForm).then((res) => {
          // const res = decryption(response)
          if (res.success) {
            this.dialogFormVisible = false
            this.$message({
              message: '获取成功',
              type: 'success'
            })
            this.time60Two()
            this.smsloginForm.smsRequestId = res.data.smsRequestId
            this.smsloginForm.smsCode = ''
            this.codeLoading = false
            this.hideScreenLoading()
          }
        }).catch(() => {
          // 如果错误 则刷新验证码
          // this.onRefresh()
          this.codeLoading = false
          if (this.$refs.dialogopen && this.currentConfigData && this.currentConfigData.twoAuthWay === '4') {
            this.onRefresh()
          }
        })
      }
    },
    time60Two() {
      this.totaltime = 59
      this.zfscontent = `${this.totaltime}s后再次获取`
      if (!this.timer2) {
        this.timer2 = setInterval(() => {
          if (this.totaltime > 0 && this.totaltime <= 60) {
            this.totaltime--
            this.zfscontent = `${this.totaltime}s后再次获取`
          } else {
            clearInterval(this.timer2)
            this.timer2 = null
            this.zfscontent = '再次获取'
          }
        }, 1000)
      }
    },
    showPwd(i) {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password[i].focus()
      })
    },

    // async handleClick(tab, event) {
    //   if (tab.name == '1') {
    //     this.loginTypeCode = '1'
    //   } else {
    //     this.loginTypeCode = '2'
    //   }
    //   await this.$nextTick()
    //   // 如果是动态的ref，并且想要获取该ref时需要加[0]
    //   if (this.$refs['loginForm'].length > 0) {
    //     this.$refs['loginForm'][0].clearValidate()
    //   }
    //   if (this.$refs['smsloginForm'].length > 0) {
    //     this.$refs['smsloginForm'][0].clearValidate()
    //   }
    // },

    // 2.0 因子2确定  只有短信验证码有确定按钮
    twoSavaData() {
      this.$refs.twoSmsloginForm.validate((valid) => {
        if (valid) {
          // 将 短信参数  表单参数  处理到this.twoSmsloginForm 统一调用 因子2短信登录接口
          this.msgLoginSavaData(this.twoSmsloginForm)
        } else {
          return false
        }
      })
    },
    // 生成滑块验证吗
    creatSlider() {
      const that = this
      getSliderKaptcha().then(async (res) => {
        const imgobj = res.data
        that.block_y = imgobj.yHeight
        // that.block_y = 0
        that.imgurl = `data:image/jpg;base64,${imgobj.backgroundImage}`
        that.miniimgurl = `data:image/png;base64,${imgobj.sliderImage}`
        // document.getElementById('img').setAttribute('src', 'data:image/png;base64,' + imgobj.sliderImage)
        that.kaptchaRequestId = imgobj.kaptchaRequestId
        this.twoType = 'siider'
        this.dialogTitle = '滑块验证'
        this.dialogFormVisible = true
        await this.$nextTick()
        this.$refs.dialogopen.reset()
      })
    },
    //  滑块
    // 刷新
    onRefresh() {
      this.imgurl = ''
      this.miniimgurl = ''
      this.creatSlider()
      this.hideScreenLoading()
    },
    // 滑动结束，后台验证, l是滑动距离
    onSuccess(l) {
      if (this.loginTypeCode === '1') {
        // 将 滑块参数  表单参数  处理到this.loginForm里 统一调用账密登录接口
        this.loginForm.kaptchaRequestId = this.kaptchaRequestId
        this.loginForm.moveLength = l
        this.accountLoginSavaData()
      } else if (this.loginTypeCode === '2') {
        // 将 滑块参数 与因子1短信表单参数 合并  处理到this.smsloginForm中   统一调用获取验证码接口
        // this.smsloginForm.kaptchaRequestId = kaptchaRequestId
        this.smsloginForm.kaptchaRequestId = this.kaptchaRequestId
        this.smsloginForm.moveLength = l
        this.sendsmsCode()
      }
    },

    // 短信登录方法
    msgLoginSavaData(formData) {
      if (this.logintypFlag) { // 单点登录
        this.unsmsloginV2(formData)
      } else {
        this.loading = true
        this.showScreenLoading()
        const smsloginForm = encryption({
          data: formData
        })
        this.$store.dispatch('user/smslogin', smsloginForm).then((res) => {
          this.getCurrentThemeInfo()
          this.$router.push(this.redirect)
          this.loading = false
          this.hideScreenLoading()
        }).catch((res) => {
          this.hideScreenLoading()
          this.loading = false
        })
      }
    },
    initUnLogin() {

    }

  }
}
</script>

<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
$cursor: #fff;
.login-container {
  min-height: 100%;
  width: 100%;
  // background-color: $bg;
  overflow: hidden;
  display: flex;
  // flex-direction: column;
  justify-content: flex-end;
  align-content: center;
    // background: url("../../assets/bg.png") 0 0 no-repeat;
  // background-size: 100%;
  // background-attachment: fixed;
    background-size: cover;
    .textbox{
      flex: 1;
      margin: 3% 9%;
      // margin: 60px 200px;
      position: relative;
      .logowhite{
        width: 178px;
        height: 63px;
      }
      .bottomtext{
        position: absolute;
        bottom: 0;
        left: 0;
        font-family: PingFang SC-常规体, PingFang SC;
        font-weight: normal;
        color: #97A1B8;
        line-height: 14px;
        font-size:12px;
      }
      .contenttext{
        margin: 5% 0 2%;
        font-size: 18px;
        font-family: PingFang SC-中黑体, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 36px;
      }
      .contenttext2{
        font-size: 16px;
        font-family: PingFang SC-细体, PingFang SC;
        font-weight: 300;
        color: #FFFFFF;
        line-height: 22px;
        span:nth-of-type(2){
          margin:0 40px;
        }
      }
      .btnbox{
        width: 100px;
          font-size: 16px;
          font-family: PingFang SC-中黑体, PingFang SC;
          font-weight: normal;
          color: #FFFFFF;
          line-height: 19px;
          margin-top: 40px;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
    }
  .form-container{
    height: 576px;
    width: 480px;
    padding: 60px 36px;
    background: #fff;
    box-shadow: 0px 4px 32px 4px rgba(0,0,0,0.0200), 0px 16px 24px 2px rgba(0,0,0,0.0400), 0px 0px 12px 0px rgba(0,0,0,0.0800);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    align-self: center;
    margin-right: 190px;
    box-sizing: border-box;
  }
  .goforgetpw{
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  .el-link{
    font-size: 14px;
  }
}
  .mobile-form-container{
    margin: auto;
  }
  .login-form {
    position: relative;
    // width: 520px;
    max-width: 100%;
    // padding: 0px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }
  /* reset element-ui css */
  ::v-deep .el-input {
    display: inline-block;
    height: 40px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    input {
      height: 40px;
      border: 1px solid #D9D9D9;
    }
     .el-input__icon{
      font-size: 16px;
    }
  }
  .login_opt{
    display: flex;
    margin-top: 10px;
    margin-bottom: 32px;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .sendMsg{
    // height: 40px;
    // line-height: 40px;
    margin-right: 10px;
  }
  .svg-container {
    // padding: 6px 5px 6px 15px;
    line-height: 45px;
    color: $dark_gray;
    vertical-align: middle;
    width: 16px;
    display: inline-block;
    img {
      width: 100%;
    }
  }
  .title-container {
    position: relative;
    text-align: center;
    margin:16px 0 32px;
    .el-image{
      vertical-align: bottom;
      margin-right: 10px;
    }
    .title {
      display: inline-block;
      font-size: 18px;
      color: #131314;
      line-height: 32px;
      font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
      // margin: 0px auto 40px auto;
      text-align: center;
      font-weight: 600;
    }
  }
  .el-form-item {
    // border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
    margin-bottom: 28px;
  }
 .title {
      font-size: 20px;
      color: #131314;
      line-height: 28px;
      font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
      text-align: center;
      font-weight: 600;
    }
  .show-pwd {
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
.goforgetpw{
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  .el-link{
    font-size: 14px;
  }
}
.loginbtn{
  width: 100%;
  height: 40px;
  font-size:16px;
  margin-top: 12px;
}
//滑块弹窗
::v-deep .slide-dialog{
  overflow-x: hidden;
  .el-dialog{
    margin-right: 190px;
  }
}
::v-deep .two_form{
    .el-form-item.yzm{
      background: #fff;
      color: #333;
      // input{

      // }

        .el-form-item__content{
            width: unset;
            height: 40px;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            // border: 1px solid #DEE0E3;
            display: flex;
            align-items: center;
            .getcode {
                border-left: 1px solid #DEE0E3;
                top: 0;

            }
            .el-input{
              input{
                color: #606266 !important;
                caret-color:#606266;
                // -webkit-text-fill-color:#C0C4CC !important;
              }
            }
        }
        .getcode{
    position: absolute;
    right: 0px;
    top: 7px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    line-height: 35px;
    // border-radious:0;
    border-radius: 0;
    // color: #E0E1EF;
    border-left: 1px solid #091934;
    padding: 0 10px;
  }
  .getcode.is-loading:before{
      background-color: unset;
  }
    }
    .el-form-item.phone{
      background: #fff;
      color: #333;
      // input{

      // }

        .el-form-item__content{
            width: unset;
            height: 40px;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            border: 1px solid #DEE0E3;
            border: none;
            padding-left: 16px;
            .getcode {
                border-left: 1px solid #DEE0E3;
                top: 0;

            }
            .el-input{
              input{
                color: #606266 !important;
                caret-color:#606266;
                -webkit-text-fill-color:#C0C4CC !important;
              }
            }
        }
    }
  }
</style>
